<template>
  <el-drawer
    :title="title"
    v-model="isShow"
    :direction="direction"
    :size="size"
    @close="handleCancel"
  >
    <template #default>
      <slot></slot>
    </template>
    <template v-if="showFooter" #footer>
      <div class="drawer-footer">
        <el-button v-if="showCancel" @click="handleCancel">取消</el-button>
        <el-button v-if="showConfirm" type="primary" @click="handleConfirm">确认</el-button>
      </div>
    </template>
  </el-drawer>
</template>

<script setup>
import {} from 'vue'
const props = defineProps({
  visible: {
    type: Boolean,
    require: true
  },
  title: {
    type: String
  },
  direction: {
    type: String,
    default: 'rtl'
  },
  size: {
    type: [Number, String],
    default: '50%'
  },
  showFooter: {
    type: Boolean,
    default: true
  },
  showCancel: {
    type: Boolean,
    default: true
  },
  showConfirm: {
    type: Boolean,
    default: true
  }
})

const emit = defineEmits(['cancel', 'confirm'])

const handleCancel = () => {
  emit('cancel')
}

const handleConfirm = () => {
  emit('confirm')
}

const isShow = computed({
  get() {
    return props.visible
  },
  set() {
    return props.visible
  }
})
</script>

<style lang="scss" scoped>
.drawer-footer {
  padding-top: 20px;
  float: right;
}
</style>
